<template>
  <div class="title">商品评论</div>

  <el-table :data="tableData" style="width: 100%" class="table">
    <!-- 商品编号 -->
    <el-table-column prop="id" label="序号" align="center" />
    <!-- 商品图片 -->
    <el-table-column label="商品图片" align="center">
      <template #default="scope">
        <img :src="scope.row.coverImage" alt="" class="img" />
      </template>
    </el-table-column>
    <!-- 商品名称 -->
    <el-table-column prop="name" label="商品名称" align="center" />
    <!-- 商品详情 -->
    <el-table-column prop="desc" label="商品详情" align="center" />
    <!-- 商品操作 -->
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
import { commentRequest } from '@/api/product'

const tableData = ref([])
const count = ref(1)
const limitNum = ref(5)
const total = ref(0)

// //页码改变
function pageChange(e) {
  console.log(count)
  console.log(e)
  //发起请求
  loadlist()
}

// 数据渲染
function loadlist() {
  commentRequest(limitNum.value, count.value).then((r) => {
    console.log(r.data)
    tableData.value = r.data.data
    total.value = r.data.total
  })
}
loadlist()
</script>

<style lang="css" scoped>
.title {
  width: 100%;
  height: 60px;
  background-color: rgb(255, 255, 255);
  line-height: 60px;
}
</style>
